import React, { useRef, useEffect } from 'react'
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';

const ThreeComponent = ()=>{
    const wraperRef = useRef();

    useEffect(()=>{
        const stats = new Stats();
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        const geometry = new THREE.BoxGeometry( 1, 1, 1 );
        const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        const cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        camera.position.z = 5;
        // 性能
        wraperRef.current.appendChild(stats.domElement);
        wraperRef.current.appendChild(renderer.domElement);

        function animate() {
            requestAnimationFrame( animate );
        
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            stats.update();
            renderer.render( scene, camera );
        }
        animate();

    }, [])

    return (<div ref={wraperRef}></div>)

}

export default ThreeComponent;